.honor-task {
  .header-view {
    position: relative;
    width: 100vw;
    height: 486rpx;
    background: @task-bg;
    background-size: 100% 100%;

    :deep(.u-icon) {
      position: absolute;
      top: 110rpx;
      left: 42rpx;
      width: 18rpx;
      height: 31rpx;
      transform: translateY(-50%);
      color: @color-origin-white;
    }

    .score-view {
      position: absolute;
      top: 213rpx;
      left: 42rpx;
      transform: translateY(-50%);
      font-family: ali-p;
      font-weight: 500;
      font-size: 31rpx;
      color: @color-origin-white;

      .score {
        font-family: borda;
        font-size: 65rpx;
        margin-right: 12rpx;
      }
      .exchange {
        font-size: 23rpx;
        :deep(.u-icon) {
          position: static;
          width: 31rpx;
          height: 31rpx;
          transform: translateY(0%);
          color: @color-origin-white;
          display: inline-block;
        }
      }
    }

    .sign-btn,
    .signed-btn {
      position: absolute;
      top: 280rpx;
      left: 42rpx;
      transform: translateY(-50%);
      width: 157rpx;
      height: 44rpx;
      line-height: 44rpx;
      border-radius: 22rpx;
      background: @linear-gradient-btn-b-g;
      font-family: ali-p;
      font-weight: 500;
      font-size: 23rpx;
      color: @color-origin-white;
      text-align: center;
      &.exchange {
        left: 220rpx;
      }
    }
  }

  .sign-box {
    position: relative;
    width: 716rpx;
    height: 350rpx;
    background-color: @color-origin-white;
    border-radius: 33rpx;
    box-shadow: 0rpx 5rpx 13rpx 1rpx rgba(0, 0, 0, 0.05);
    margin: -123rpx auto 0;
    padding: 33rpx 20rpx 44rpx 23rpx;
    box-sizing: border-box;
    z-index: 999;
    font-family: "ali-p";

    .title {
      display: flex;
      justify-content: space-between;

      .left {
        display: flex;
        flex-direction: column;

        &-top {
          font-weight: 600;
          font-size: 31rpx;
          color: @color-black-text;
        }

        &-bottom {
          margin-top: 16rpx;
          font-weight: 400;
          font-size: 23rpx;
          color: @color-light-grey-text;
        }
      }

      .right {
        font-weight: 600;
        font-size: 23rpx;
      }
    }

    .sign-card {
      display: flex;
      justify-content: space-between;
      margin-top: 50rpx;
    }
  }

  .daily-task-card {
    width: 716rpx;
    margin: 37rpx auto 0;
    background-color: @color-origin-white;
    padding: 33rpx 20rpx 45rpx 23rpx;
    box-sizing: border-box;
    border-radius: 33rpx;
    box-shadow: 0rpx 5rpx 13rpx 1rpx rgba(0, 0, 0, 0.05);
    font-family: "ali-p";

    .title {
      font-weight: 600;
      font-size: 31rpx;
      color: @color-black-text;
    }

    .task-list {
      margin-top: 26rpx;

      .task {
        display: flex;
        align-items: center;
        background-color: @color-lightly-grey;
        padding: 26rpx 27rpx 27rpx 22rpx;
        margin-top: 26rpx;
        box-sizing: border-box;
        border-radius: 16rpx;

        &-icon {
          width: 65rpx;
          height: 65rpx;
        }

        &-desc {
          display: flex;
          flex-direction: column;
          margin-left: 26rpx;
          width: 340rpx;

          &__title {
            font-size: 31rpx;
            font-weight: 600;
          }

          &__content {
            margin-top: 11rpx;
            font-size: 23rpx;
            color: @color-light-grey-text;
            font-weight: 400;
          }
        }

        .btn {
          width: 157rpx;
          height: 44rpx;
          line-height: 44rpx;
          background-color: @color-blue;
          color: @color-origin-white;
          text-align: center;
          border-radius: 22rpx;
          font-size: 23rpx;
        }
      }
    }
  }
}
